<template>
	<w-container>
		<!-- 顶部搜索 -->
		<collectionSearch @changetab="changetab" @changeSearch="changeSearch" @closeSearch="closeSearch"></collectionSearch>
		<!-- 列表 -->
		<view class="flex flex-js-sb flex-w plr-16">
			<collectionItem v-for="(item,idx) in list" :key="idx" :item="item" :types="param.types" @click="openPop(item)"></collectionItem>
		</view>
		<!-- 弹窗详情 -->
		<popDetails v-model="showPop" :id="collection_id" :types="param.types"></popDetails>
		<!-- 加载 -->
		<w-loading :type="loadingType" emptyType="myCollection" class="mt-12" emptyTop="100"></w-loading>
	</w-container>
</template>

<script>
	import collectionSearch from './components/collectionSearch.vue';
	import collectionItem from './components/collectionItem.vue';
	import popDetails from './components/popDetails.vue';
	import { antMycollection } from '@/api/collection/index.js';
	export default {
		components:{ collectionSearch,collectionItem,popDetails },
		data() {
			return {
				loadingType:'none',
				showPop:false,
				isNext:true,
				list:[],
				param:{
					types:2, //1盲盒 2藏品 3已售出
					page:1
				},
				collection_id:''
			};
		},
		onLoad() {
			this.refresh()
		},
		methods:{
			// 刷新
			refresh() {
				this.loadingType = 'none'
				this.showPop = false
				this.isNext = true
				this.list = []
				this.param.page = 1
				this.getList() 
			},
			
			// tab切换
			changetab(e) {
				this.isNext = true;
				this.list = [];
				this.param.types = e.types;
				this.param.page = 1;
				this.param.collection_id = '';
				this.getList();
			},
			
			// 获取列表
			getList() {
				if(!this.isNext) return;
				this.loadingType = 'loading';
				antMycollection(this.param).then(res=>{
					uni.stopPullDownRefresh()
					let { data,last_page } = res.data;
					this.list = [...this.list,...data];
					if(this.param.page<last_page){
						this.param.page++;
					}else{
						this.isNext = false;
						this.loadingType = 'none';
					}
					!data.length && (this.loadingType = 'empty');
				}).catch(()=>{ this.loadingType = 'none'; })
			},
			
			// 选择搜索列表
			changeSearch(e) {
				this.isNext = true;
				this.list = [];
				this.param.collection_id = e;
				this.param.page = 1;
				this.getList();
			},
			
			// 收起查询
			closeSearch() {
				this.param.collection_id = '';
				this.refresh();
			},
			
			// 弹窗详情
			openPop(item) {
				if(this.param.types==3 || this.param.types==4) return;
				this.collection_id = item.collection.id;
				this.showPop = true;
			}
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss">
	
</style>